import React, { useState } from 'react';
import classnames from 'classnames';
import { Table } from 'antd';

import style from './index.less';


const getGroupKey = item => `${item.startAgeSign}_${item.startAge}_${item.endAgeSign}_${item.endAge}`;
const TableWrapper = ({ columns, dataSource }) => {
    const [hoverData, setHoverRowData] = useState(null);

    const tableProps = {
        onRow: record => ({
            className: classnames({
                'row-hover': hoverData && getGroupKey(hoverData) === getGroupKey(record)
            }),
            onMouseEnter: () => {
                setHoverRowData(record);
            },
            onMouseLeave: () => {
                setHoverRowData(null);
            }
        })
    };

    return (
        <div className={style.tableWrapper}>
            <div className={style.titleBox}>
                <div className={style.mainTitle}>私营企业 /非退休金雇员(部委、法定机构和受援学校)</div>
                <div>公积金缴交比例(Jan-01,2020起生效) 表格适用于新加坡公民和新加坡永居居民（3年及以上）</div>
            </div>
            <Table
                columns={columns}
                rowKey="id"
                dataSource={dataSource}
                pagination={false}
                bordered
                {...tableProps}
            />
        </div>
    );
};

export default TableWrapper;
